<template>
	<view class="lease-return-detail">

		<!-- 商品 -->
		<view class="container goods">
			<view class="row-between">
				<view class="goods-title">商品信息</view>
				<view class="goods-sign">已买断</view>
			</view>
			<lease-order-goods :image="goodsInfo.image">
				<template #name>{{ goodsInfo.goods_name }}</template>
				<template #specs>
					{{ goodsInfo.periods }}{{ getPeriodsUnit(goodsInfo.periods_attribute) }}
				</template>
				<template #price>
					<price :content="priceDayRent" mainSize="38rpx" minorSize="24rpx" color="#333333" :isPrefix="true"
						:isSuffix="true" />
					<text>（x{{ goodsInfo.periods }}期）</text>
				</template>
			</lease-order-goods>
		</view>

		<!-- 资金明细 -->
		<view class="container nr normal">
			<view class="price-item">
				<view class="price-name">买断金额</view>
				<view class="price-count">¥{{ amountInfo.pay_amount }}</view>
			</view>
			<view class="price-total">
				<view class="price-total-title">合计:</view>
				<view class="price-total-count">¥{{ amountInfo.pay_amount }}</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="container">
			<!-- 付款方式 -->
			<view class="info-item">
				<view class="info-item-label">付款方式</view>
				<view class="info-item-content">{{ getPayWayName(orderInfo.pay_way) }}</view>
			</view>
			<!-- 订单编号 -->
			<view class="info-item">
				<view class="info-item-label">订单编号</view>
				<view class="info-item-content">
					<text>{{ orderInfo.order_sn }}</text>
					<text class="muted ml20" @click="copyText(orderInfo.order_sn)">复制</text>
				</view>
			</view>
			<!-- 下单时间 -->
			<view class="info-item">
				<view class="info-item-label">下单时间</view>
				<view class="info-item-content">{{ orderInfo.create_time }}</view>
			</view>
		</view>

	</view>
</template>


<script>
	import {
		leaseBuyOutDetail
	} from '@/api/lease';
	
	import { copy } from '@/utils/tools'

	export default {
		data() {
			return {
				goodsInfo: {},			// 商品信息
				orderID: '',			// 租赁订单ID
				orderInfo: {},			// 订单信息
				amountInfo: {}, 		// 支付金额信息
				priceDayRent: 0, 		// 每日租赁价格
				periodization: {},		// 租期信息
			}
		},

		methods: {
			// 输出分期单位
			getPeriodsUnit(value) {
				switch (value) {
					case 'is_week':
						return '周';
					case 'is_month':
						return '个月';
				}
			},

			// 支付名称
			getPayWayName(payway) {
				switch (payway) {
					// 微信支付
					case 1:
						return '微信支付';
					// 支付宝支付
					case 2:
						return '支付宝支付';
					// 余额支付
					case 3:
						return '余额支付';
				}
			},

			// 复制文本
			copyText(value) {
				copy(value)
			},
		},

		onLoad(options) {
			const id = options.id;
			this.orderID = id
		},

		onShow() {
			leaseBuyOutDetail({
				id: this.orderID
			}).then(res => {
				if (res.code != 1) return;
				const data = res.data;

				this.goodsInfo = data.goods_info;
				this.orderInfo = data.order_info;
				this.periodization = data.periodization_info;
				this.amountInfo = data.amount_info || null;

				switch (this.goodsInfo.periods_attribute) {
					case 'is_week':
						this.priceDayRent = (this.goodsInfo.issue_rent / 7).toString().match(/^\d+(?:\.\d{0,2})?/);
						break;
					case 'is_month':
						this.priceDayRent = (this.goodsInfo.issue_rent / 30).toString().match(/^\d+(?:\.\d{0,2})?/);
						break;
				}

			});
		}
	}
</script>


<style scoped>
	.container {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 7px;
		background-color: #FFFFFF;
	}

	.lease-return-detail {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 20rpx;
	}
	
	.periods-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}
	
	.periods-item:nth-child(n+2) {
		margin-top: 20rpx;
	}

	.goods-title {
		margin-bottom: 10rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	
	.goods-sign {
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 30rpx;
		margin-right: -20rpx;
		border-radius: 50px 0 0 50px;
		background-image: linear-gradient(8deg, #61C2FE, #24A3FF);
		color: #FFFFFF;
	}

	.info-item {
		display: flex;
	}

	.info-item:nth-child(n+2) {
		margin-top: 20rpx;
	}

	.info-item-label {
		min-width: 146rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
	.price-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
	
	.price-total {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 94rpx;
		border-top: 1px solid #E5E5E5;
		color: #333333;
	}
	
	.price-total-title {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.price-total-count {
		font-size: 36rpx;
		color: #FF2C3C;
	}
</style>
